<template>
  <div>
    <!-- <baseLayout title="基础用法" subTitle="基础的树形结构展示。">
      <e-tree
        :data="data2"
        :props="defaultProps2"
        @node-click="handleNodeClick"
      ></e-tree>
    </baseLayout> -->
    <e-button @click="handleClickBtn">按钮</e-button>
    <baseLayout title="bimwin数据测试" subTitle="基础的树形结构展示。">
      <div style="height: 400px; overflow: auto;">
        <e-tree
          :data="data2"
          show-checkbox
          defaultExpandAll
          node-key="id"
          :props="defaultProps2"
        ></e-tree>
      </div>
    </baseLayout>
    <baseLayout title="element数据测试" subTitle="默认展开">
      <e-tree
        :data="data2"
        show-checkbox
        node-key="id"
        defaultExpandAll
        @check-change="handleCheckChange2"
        @check="handleCheck2"
        :props="defaultProps2"
      >
      </e-tree>
    </baseLayout>
    <!-- <baseLayout title="默认展开" subTitle="默认展开">
      <e-tree
        :data="data3"
        show-checkbox
        node-key="id"
        @check-change="handleCheckChange3"
        @check="handleCheck3"
        :props="defaultProps3"
      >
      </e-tree>
    </baseLayout> -->
  </div>
</template>

<script>
export default {
  name: "trees",
  data() {
    return {
      data1: [],
      data2: [
        {
          id: 0,
          label: "0级 1",
          children: [
            {
              id: 1,
              label: "一级 1",
              children: [
                {
                  id: 4,
                  label: "二级 1-1",
                  children: [
                    {
                      id: 9,
                      label: "三级 1-1-1",
                    },
                    {
                      id: 10,
                      label: "三级 1-1-2",
                    },
                  ],
                },
              ],
            },
            {
              id: 2,
              label: "一级 2",
              children: [
                {
                  id: 5,
                  label: "二级 2-1",
                },
                {
                  id: 6,
                  label: "二级 2-2",
                  children: [
                    {
                      id: 22,
                      label: "三级 2-3-1",
                    },
                    {
                      id: 44,
                      label: "三级 2-3-2",
                    },
                  ],
                },
              ],
            },
            {
              id: 3,
              label: "一级 3",
              children: [
                {
                  id: 7,
                  label: "二级 3-1",
                  children: [
                    {
                      id: 24,
                      label: "三级 3-1-1",
                    },
                    {
                      id: 130,
                      label: "三级 3-2",
                    },
                  ],
                },
                {
                  id: 8,
                  label: "二级 3-2",
                  children: [
                    {
                      id: 9,
                      label: "三级 3-1",
                    },
                    {
                      id: 10,
                      label: "三级 3-2",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps2: {
        children: "children",
        label: "label",
        disabled: "disabled",
        checked: "checked",
      },
      defaultProps3: {
        children: "ChildNodes",
        label: "text",
        disabled: "disabled",
        checked: "showcheck",
        isCheckbox: "isShow",
      },
      defaultProps4: {
        children: "children",
        label: "DisplayName",
        disabled: "disabled",
        checked: "showcheck",
      },
    };
  },
  methods: {
    handleClickBtn() {
      this.data1 = this.data4;
    },
    handleNodeClick(data) {
      // console.log(data);
    },
    handleCheckChange3(data, isChecked) {
      console.log("check-change");
      console.log(data);
      console.log(isChecked);
    },
    handleCheck3(data, isChecked) {
      console.log(data);
      console.log(isChecked);
    },
    handleCheckChange2(data, isChecked) {
      // console.log(data.text);
      // console.log(isChecked);
    },
    handleCheck2(data, isChecked) {
      console.log(data);
      console.log(isChecked);
    },
  },
};
</script>

<style lang="stylus" scoped></style>
